<template>
	<view>
		<view class="footTab align-center">
			<view class="flex align-center rowsb padding-lr-xl margin-top-xl" style="width: 100%;">
				<view @click=" tabIndexMen(tabIndex)" :class="['tanItem',tabIndex==0?'tanItemHov':'']">
					<view>
						<image src="/static/tabBar/icon_bqlsywxz.png" class="tab-icon" mode=""></image>
						<image src="/static/tabBar/icon_bqlzyxz.png" class="tab-icon  tab-iconHov" mode=""></image>
					</view>
					<view class="tanItem_text">首页</view>
				</view>
				<!-- {{userInfo}} -->
				<!-- 普通用户的话 -->
				<!-- 名师的话 -->
				<view v-if="userInfo.typedata =='2'" :class="['tanItem',tabIndex==1?'tanItemHov':'']"
					@click="teacherHome() ">
					<view>
						<image src="/static/tabBar/icon_bqlzywxz.png" class="tab-icon" mode=""></image>
						<image src="/static/tabBar/icon_zyxxbql.png" class="tab-icon  tab-iconHov" mode=""></image>
					</view>
					<view class="tanItem_text">主页</view>
				</view>
				<view v-else @click="tabIndexMen2()"
					:class="['tanItem',tabIndex==1?'tanItemHov':'']">
					<view>
						<image src="/static/tabBar/icon_bqlzywxz.png" class="tab-icon" mode=""></image>
						<image src="/static/tabBar/icon_zyxxbql.png" class="tab-icon  tab-iconHov" mode=""></image>
					</view>
					<view class="tanItem_text">主页</view>
				</view>

				<view @click="tabIndexMen3" :class="['tanItem',tabIndex==2?'tanItemHov':'']">
					<view style="margin-top: -40rpx;">
						<view>
							<image src="/static/tabBar/icon_bqltw.png" class="tab-icon2" mode=""></image>
						</view>
						<view class="tanItem_text">提问</view>
					</view>
				</view>
				<view @click=" tabIndexMen4" :class="['tanItem',tabIndex==3?'tanItemHov':'']">
					<view style="position: relative;">
						<image src="/static/tabBar/icon_bqlxxwxz.png" class="tab-icon" mode=""></image>
						<image src="/static/tabBar/icon_bqlxxxz.png" class="tab-icon  tab-iconHov" mode=""></image>
						<view class="message_corner" v-if="total">{{Number(total)<99?total:'99'}}</view>
					</view>
					<view class="tanItem_text">消息</view>
				</view>
				<view @click=" tabIndexMen5" :class="['tanItem',tabIndex==4?'tanItemHov':'']">
					<view>
						<image src="/static/tabBar/icon_bqlwdwxz.png" class="tab-icon" mode=""></image>
						<image src="/static/tabBar/icon_bqlwdxz.png" class="tab-icon  tab-iconHov" mode=""></image>
					</view>
					<view class="tanItem_text">我的</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				total:getApp().globalData.total,
				userInfo: uni.getStorageSync('userInfo')
			};
		},
		props: {
			tabIndex: Number,
			userType: Number,
			// userInfo:Array
		},
		computed: mapState(['typedata']),
		methods: {
		
		
			tabIndexMen(index) {
				if (index == 0) {
					console.log('[当前页面不可点击]');
				} else {
					this.url('/pages/home/index')
				}
			},
			tabIndexMen2(index) {
				if (this.tabIndex == 1) {
				
				} else {
					this.url('/pages/user/userHome/index?id='+this.userInfo.id)
					
				}
			},
			tabIndexMen3() {
				if (this.tabIndex == 2) {
				
				} else {
					this.url('/pages/putQuestions/subQuestions') 
					
				}
			},
			tabIndexMen4() {
				if (this.tabIndex == 3) {
				
				} else {
					this.url('/pages/message/index') 
					
				}
			},
			tabIndexMen5() {
				if (this.tabIndex == 4) {
				
				} else {
					this.url('/pages/user/index')
					
				}
			},
			url(text) {
				uni.reLaunch({
					url: text
				})
			},
			teacherHome() {
				if (this.tabIndex == 1) {
					console.log('[当前页面不可点击]');
				} else {
					let data = {
						id: this.userInfo.id
					}
					console.log(data);
					this.$store.state.teacherData = data
					console.log(this.$store.state.teacherData);
					uni.navigateTo({
						url: '/pages/teacher/teacherHome?id='+this.userInfo.id
					})
				}
			}
		}
	}
</script>

<style>
	/* tab页面的共同样式 */
	.tab-icon {
		width: 50rpx;
		height: 50rpx;
	}

	.tab-icon2 {
		height: 90rpx;
		width: 90rpx;
	}

	.tab-add {
		width: 80rpx;
		height: 80rpx;
	}

	.footTab {
		background-image: url(../static/tabBar/icon_bj.png);
		/* background-color: #FFFFFF; */
		height: 200rpx;
		background-size: 100% 100%;
		position: fixed;
		left: -20rpx;
		right: -20rpx;
		bottom: -20rpx;
		/* padding-bottom: 30rpx; */
		z-index: 899;
		/* box-shadow: -1px -2px 13px 3px rgba(0, 0, 0, 0.12); */
	}

	.tab-iconHov {
		display: none;
	}

	.tanItemHov .tab-icon {
		display: none;
	}

	.tanItemHov .tab-iconHov {
		display: block;
	}

	.tanItem {
		font-size: 24rpx;
		color: #B1B2B4;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.tanItem_shoop .tanItem_text {
		margin-top: 2rpx;
	}

	.tanItemHov .tanItem_text {
		font-weight: bold;
		margin-top: 6rpx;
		color: #FFB943;
		background: #FFB943;
		-webkit-background-clip: text;
		color: transparent;
	}

	.tanItem_shoop {
		position: relative;
		top: -16rpx;
	}
	.message_corner {
		width: 30rpx;
		height: 30rpx;
		background: red;
		border-radius: 99rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 22rpx;
		position: absolute;
		top: -10rpx;
		line-height: 30rpx;
		right: -20rpx;
	}

	/* tab页面的共同样式完 */
</style>
